<template>
	<view>
		<view class="header">
			<u-navbar
				:background="{ backgroundColor: '#3478f2' }"
				back-icon-color="#fff"
				back-icon-name="arrow-left"
				back-icon-size="40"
				title="资产信息"
				title-color="#fff"
				title-size="40"
				title-bold
				:customBack="handleNavBack"
			></u-navbar>
		</view>
		<scroll-view scroll-top="0" scroll-y="true" :style="`height:${scrollHeight}px`">
			<view class="content">
				<view class="top">
					<view class="top_item">
						<view class="circle active">
							<image class="img" src="/static/icon/shimingbai.png" lazy-load="false"></image>
						</view>
						<text class="top_item_text active">实名申请</text>
					</view>
					<view class="top_item">
						<view class="circle active">
							<image class="img" style="margin-left: 8rpx" src="/static/icon/tianxiebai.png" lazy-load="false"></image>
						</view>
						<text class="top_item_text active">填写借款资料</text>
					</view>
					<view class="top_item">
						<view class="circle">
							<image class="img" src="/static/icon/fangkuanhui.png" lazy-load="false"></image>
						</view>
						<text class="top_item_text">审核放款</text>
					</view>
				</view>
				<view class="p-24">
					<view class="title">
						<text class="">*</text>
						<view class="title_dec">资质信息</view>
					</view>
					<view class="list">
						<view class="list_item" v-for="(item, index) in list" :key="index">
							<view class="lable">{{ item.label.key }}</view>
							<view class="item_btn">
								<text :class="{ active: items.flag }" v-for="(items, indexs) in item.value" :key="indexs" @click="handleItem(index, indexs)">
									{{ items.key }}
								</text>
							</view>
						</view>
					</view>
					<view class="agreement_flex">
						<u-checkbox v-model="checked" shape="circle" size="28" label-size="24rpx">已经阅读并同意</u-checkbox>
						<text @click="openView">《贷款知情书》</text>
					</view>
					<view class="divider"></view>
					<view class="btn" v-if="isActive" @click="handleBtn">立即提交下款审核</view>
					<view class="btn2" v-else>立即提交下款审核</view>
				</view>
				<u-popup v-model="showDow" :mask-close-able="false" mode="center" border-radius="16" width="532rpx" height="300rpx">
					<view class="dow_box">
						<view style="height: 60rpx"></view>
						<u-slider v-model="count" min="0" max="100" height="16" :use-slot="true">
							<view class="badge-button">{{ count }}%</view>
						</u-slider>
						<view style="font-size: 32rpx; font-family: PingFang SC; font-weight: 400; color: #151515; margin-top: 40rpx">正在提交...</view>
					</view>
				</u-popup>
				<uni-popup ref="popup" :mask-click="false" type="center">
					<view class="pop">
						<image src="/static/icon/tishi.png" class="pop_img" />
						<view class="pop_text">该项认证非常重要，仅用作借款 审核，不完成将无法借款，确定 要放弃吗?</view>
						<button class="pop_conform" @click="commit">继续借款</button>
						<view class="pop_b">
							<text @click="handleBack">暂时放弃</text>
						</view>
					</view>
				</uni-popup>
				<uni-popup ref="popup1" type="center">
					<view class="pop1">
						<view class="title1">请确认</view>
						<view class="pop_text">
							你已阅读并同意
							<text @click="openView">《贷款知情书》</text>
						</view>
						<button class="pop_conform" @click="pop_commit">我已阅读并同意</button>
					</view>
				</uni-popup>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import ajax from '@/api'
import { mixin } from '@/utils/mixins'
export default {
	mixins: [mixin],
	data() {
		return {
			timer: null,
			count: 10,
			showDow: false,
			numList: [
				{
					name: '实名申请'
				},
				{
					name: '填写借款资料'
				},
				{
					name: '审核放款'
				}
			],
			list: [],
			checked: false
		}
	},

	computed: {
		isActive() {
			let bool = []
			this.list.forEach((item) => {
				item.value.forEach((v) => {
					if (v.flag) {
						bool.push(v)
					}
				})
			})
			return bool.length == this.list.length
		}
	},
	onShow() {},
	onLoad() {
		uni.getSystemInfo({
			success: (res) => {
				this.windowHeight = res.windowHeight
			}
		})
		this.init()
	},
	onUnload() {
		this.timer = null
	},
	mounted() {
		this.getElmentInfo()
		this.$refs.popup1.open()
	},
	methods: {
		handleNavBack() {
			this.$refs.popup.open()
		},
		pop_commit() {
			this.checked = true
			this.$refs.popup1.close()
		},
		async init() {
			try {
				const data = await ajax.getEnume()
				if (data.length) {
					data.forEach((item) => {
						item.value.forEach((v) => {
							v.flag = false
						})
					})
				}
				this.list = data
			} catch (error) {
				console.log(error)
			}
		},
		commit() {
			this.$refs.popup.close()
		},
		handleBack() {
			uni.navigateBack()
		},
		async progressbar() {
			let params = {}
			this.list.forEach((item) => {
				params[item.label.value] = item.value.filter((v) => v.flag == true)[0].value
			})
			try {
				const result = await ajax.postTwo(params)
				console.log(result)
				this.showDow = true
				this.count = 0
				this.timer = setInterval(() => {
					this.count = this.count + Math.floor(Math.random() * 15 + 5)
					if (this.count > 100) {
						clearInterval(this.timer)
						this.showDow = false
						if (result.is_cp == 1) {
							uni.navigateTo({
								url: `/pages/auth/affirm`
							})
						}
						if (result.is_cp == 2) {
							uni.navigateTo({
								url: `/pages/financial/putSucceeB`
							})
						}
						if (result.is_cp == 3) {
							uni.navigateTo({
								url: `/pages/financial/putSucceeA`
							})
						}
					}
				}, 180)
			} catch (error) {
				console.log(error)
			}
		},
		//点击提交
		handleBtn() {
			this.progressbar()
		},
		//打开外部贷款知情书
		openView() {
			const name = '贷款知情书'
			const url = 'https://website.zd-dqd.com/dqdxy/#/pages/agreement/book1'
			uni.navigateTo({
				url: `/pages/webView/index?name=${name}&url=${url}`
			})
		},
		//点击每个选项
		handleItem(index, indexs) {
			this.list.forEach((item, itemIndex) => {
				if (itemIndex == index) {
					this.list[index].value.forEach((v) => {
						v.flag = false
						this.list[index].value[indexs].flag = true
					})
				}
			})
		}
	}
}
</script>

<style lang="scss">
.top_item_text {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #969799;
	margin-top: 8rpx;
}
.top_item_text.active {
	color: #3478f2;
}
.img {
	width: 60rpx;
	height: 60rpx;
}
.circle {
	width: 88rpx;
	height: 88rpx;
	border-radius: 100%;
	background: #e4e4e4;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.circle.active {
	background: #3478f2;
}
.circle::after {
	position: absolute;
	content: '';
	width: 200rpx;
	height: 8rpx;
	background: #d9d9d9;
	top: 50%;
	left: 87rpx;
}
.circle.active::after {
	background: #3478f2;
}
.top_item:last-child .circle::after {
	height: 0rpx;
}
.badge-button {
	width: 60rpx;
	height: 32rpx;
	background: #3478f2;
	line-height: 32rpx;
	text-align: center;
	font-size: 16rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #ffffff;
	border-radius: 16rpx;
}
.list {
	padding-left: 20rpx;
	margin-top: 28rpx;
}
.list_item {
	display: flex;
	align-items: flex-start;
	.lable {
		width: 150rpx;
		text-align: left;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #969799;
	}
	.item_btn {
		display: flex;
		flex: 1;
		flex-wrap: wrap;
	}
}
.item_btn text {
	width: 30%;
	height: 60rpx;
	line-height: 58rpx;
	text-align: center;
	border-radius: 30rpx;
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: 400;
	border: 2rpx solid #bdbdbd;
	color: #969799;
	margin-right: 16rpx;
	margin-bottom: 36rpx;
}
.item_btn text.active {
	background: #eef4fe;
	border: 2px solid #3478f2;
	color: #3478f2;
}
.agreement_flex {
	margin: 36rpx auto;
	display: flex;
	align-items: center;
	justify-content: center;
	text {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #3478f2;
		margin-left: -20rpx;
	}
}
::v-deep .uicon-checkbox-mark:before {
	margin-left: 20rpx;
}
.agreement_bten {
	height: 70rpx;
	line-height: 70rpx;
	font-size: 40rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #3478f2;
	text-align: center;
}
.divider {
	width: 702rpx;
	height: 2rpx;
	background: #e4e4e4;
	margin: 20rpx auto;
}
.agreement_content {
	padding: 10rpx 24rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 56rpx;
	color: #151515;
}
.agreement_title {
	font-size: 40rpx;
	margin-top: 50rpx;
	font-family: PingFang SC;
	font-weight: bold;
	text-align: center;
	color: #333333;
}
.agreement_dec {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	margin-top: 40rpx;
	text-align: center;
	color: #333333;
}
.dow_box {
	padding: 38rpx;
	text-align: center;
	.dow_title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}
	.deposit_btn {
		width: 372rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #3478f2;
		border-radius: 36rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
		margin: 44rpx auto;
	}
	.edit_btn {
		width: 372rpx;
		height: 72rpx;
		background: #ffffff;
		border: 2rpx solid #3478f2;
		border-radius: 36rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #3478f2;
		margin: 0 auto;
		line-height: 72rpx;
	}
	.dec {
		margin-top: 16rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
}
.title {
	margin-left: 12rpx;
	display: flex;
	align-items: flex-start;
	text {
		color: red;
	}
}
.title_dec {
	font-size: 40rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
	position: relative;
}
.title_dec::after {
	position: absolute;
	content: '';
	width: 38rpx;
	height: 4rpx;
	background: #3478f2;
	left: 0;
	bottom: -6rpx;
}
.gou {
	width: 750rpx;
	height: 64rpx;
	background: #e4eeff;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #3478f2;
	line-height: 64rpx;
	text-align: center;
}
.btn {
	width: 652rpx;
	height: 92rpx;
	background: linear-gradient(270deg, #0481fe 0%, #40c5fe 100%);
	line-height: 92rpx;
	border-radius: 70rpx;
	margin: 38rpx auto;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
}
.btn2 {
	width: 652rpx;
	height: 88rpx;
	background: #cccccc;
	line-height: 88rpx;
	border-radius: 44rpx;
	margin: 38rpx auto;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
}
.top {
	padding: 0 52rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 750rpx;
	height: 180rpx;
	background: #ffffff;
	border-radius: 0px;
}
.p-24 {
	padding: 24rpx;
	background-color: #fff;
}
.pop1 {
	width: 606rpx;
	padding: 60rpx;
	background: #ffffff;
	border-radius: 16rpx;
	.title1 {
		text-align: center !important;
		width: 100%;
		font-size: 44rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.pop_text {
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		margin-top: 32rpx;
		color: #333333;
		text {
			color: #3478f2;
		}
	}
	.pop_conform {
		height: 88rpx;
		line-height: 88rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 400;
		text-align: center;
		color: #ffffff;
		background: #3478f2;
		border-radius: 16rpx;
		margin-top: 58rpx;
	}
}
.pop {
	width: 606rpx;
	border-radius: 16rpx;
	background-color: #ffffff;
	position: relative;
	padding: 62rpx 0;
	text-align: center;
	.shan_dian {
		width: 138rpx;
		height: 274rpx;
		position: absolute;
		left: 0;
		top: 0;
	}
	.pop_title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.pop_dec {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #0780fe;
	}
	.pop_product {
		margin-top: 28rpx;
		.product_img {
			width: 112rpx;
			height: 112rpx;
			border-radius: 8rpx;
			margin: 12rpx auto;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.product_name {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}
	.pop_b {
		margin-top: 64rpx;
		display: flex;
		justify-content: center;
		flex: 1;
		text {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #696969;
		}
	}
	.pop_img {
		width: 161rpx;
		height: 157rpx;
	}
	.pop_text {
		width: 448rpx;
		margin: 0 auto;
		font-size: 32rpx;
		margin-top: 40rpx;
		color: #333;
	}
	.pop_ipt {
		display: block;
		box-sizing: border-box;
		margin: 0 auto;
		width: 448rpx;
		height: 80rpx;
		line-height: 40px;
		margin-top: 24rpx;
		padding-top: 10rpx;
	}
	.pop_conform {
		margin-top: 40rpx;
		width: 448rpx;
		height: 88rpx;
		background-color: #3478f2;
		font-size: 36rpx;
		color: #ffffff;
		border-radius: 16rpx;
		font-family: PingFang SC;
		font-weight: 400;
	}
	.pop_conform:active {
		opacity: 0.5;
	}
	.pop_out {
		position: absolute;
		width: 64rpx;
		height: 64rpx;
		top: -84rpx;
		right: -20rpx;
	}
}
</style>
